<template>
	<div class="banner">
		<img src="@/assets/img/banner/header-image.png" class="header_img" />
		<div class="welcome">
			<i class="text text_top">Welcome</i>
			<i class="text text_bot">To My Website！</i>
		</div>
		<div class="user">
			<div class="user_content">
				<div class="avatar_box">
					<img :src="userInfo.avatar" alt="头像" class="avatar" />
				</div>
				<div class="user_info">
					<p class="info">博主：{{ userInfo.nickName }}</p>
					<p class="info">职业：{{ userInfo.occupation }}</p>
					<p class="info">微信：{{ userInfo.wechat }}</p>
				</div>
				<div class="notice">
					<div class="time">
						{{ time }}
					</div>
					<div class="date">{{ dateStr() }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { selectUserInfo } from '@/service/content'
import { timeStr, dateStr } from '@/utils/useDateTime'

const time = ref(timeStr())
onMounted(() => {
	setInterval(() => {
		time.value = timeStr()
	}, 1000)
})

const userInfo = ref<any>({})
async function queryUserInfo() {
	userInfo.value = await selectUserInfo()
}
queryUserInfo()
</script>

<style lang="less" scoped>
@import url('@/assets/css/constants.less');

.banner {
	position: relative;
	width: 100%;
	// height: 65vh;
	padding-top: 30vh;
	margin-bottom: 80px;
	display: flex;
	justify-content: center;
	align-items: flex-end;

	.header_img {
		position: absolute;
		top: 40px;
		left: 40px;
		width: 180px;
		animation: photoMove 2s infinite ease-in-out alternate;
	}

	.welcome {
		position: absolute;
		right: 50px;
		top: 40px;
		font-size: 50px;
		font-weight: bold;
		.text {
			display: block;
			color: #fff;
			text-shadow: @textShadow, @textShadow, @textShadow, @textShadow, @textShadow, @textShadow;
		}
	}
}
.user_content {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	width: 1150px;
	height: 250px;
	padding: 40px 0;
	background: @cardBackGround;
	backdrop-filter: @backdropFilter;
	border-radius: @borderRadius;
	box-shadow: @boxShadow;

	.avatar_box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 200px;
		height: 200px;
		background: #fff;
		border-radius: @borderRadius;
		transform: translateY(-40%);
		overflow: hidden;
		.avatar {
			width: 100%;
			// height: 100%;
		}
		.about_btn {
			width: 100%;
			height: 42px;
			border-radius: @borderRadius;
			box-shadow: @boxShadow;
		}
	}

	.user_info {
		width: 300px;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.info {
			width: 100%;
			height: 46px;
			line-height: 46px;
			padding-left: 20px;
			color: #ffffff;
			font-size: 17px;
			background: linear-gradient(90deg, #3f5bfa, #ab76ff);
			border-radius: 24px;
		}
	}

	.notice {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 200px;
		height: 100%;
		text-align: center;
		border-radius: @borderRadius;
		.time {
			font-size: 50px;
			margin-bottom: 20px;
		}
		.date {
			font-size: 18px;
		}
	}
}

@keyframes photoMove {
	from {
		transform: translateY(16px);
	}
	to {
		transform: translateY(-16px);
	}
}
</style>
